<!--
 * @Description: 
 * @Author: Mogy
 * @Date: 2021-06-30 20:36:05
 * @LastEditors: Mogy
 * @LastEditTime: 2021-07-03 19:39:50
-->
<template>
  <div class="body">
    <div class="head" @click="toOrder">
      <van-icon class="icon" name="arrow-left" color="rgb(230, 240, 236)" size="20" />
      <span>订 单</span>
    </div>
    <div class="content">
      <div class="cards" v-for="item in orderLines" :key="item.id">
        <van-card
          :num="item.number"
          :price="item.price"
          :desc="item.product.description"
          :title="item.product.name"
          :thumb="item.product.photo"
        />
      </div>
      <div class="money">
        <div>
          <span class="title">总计：</span>
          ￥{{total}}
        </div>
      </div>
      <div class="info">
        <div>服务地址：{{orderData.address.province+orderData.address.area+orderData.address.city+orderData.address.address}}</div>
        <div>联系方式：{{orderData.customer.username}}({{orderData.customer.telephone}})</div>
        <div>下单时间：{{moment(orderData.orderTime).format('YYYY-MM-DD hh:mm')}}</div>
        <div>服务时间：{{moment(orderData.serviceTime).format('YYYY-MM-DD hh:mm')}}</div>
        <div class="info_status">
          <van-tag plain type="success" v-if="orderData.status=='已完成'">{{orderData.status}}</van-tag>
          <van-tag plain type="danger" v-else-if="orderData.status=='待服务'">{{orderData.status}}</van-tag>
          <van-tag plain type="warning" v-else>{{orderData.status}}</van-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findById } from "@/api/order";
import moment from "moment";
export default {
  data() {
    return {
      moment,
      orderLines: [],
      total: 0,
      orderData: {},
    };
  },
  computed: {},
  methods: {
    async findByIdOrderData() {
      let res = await findById({ id: this.$route.query.id });
      this.orderLines = res.data.orderLines;
      this.orderData = res.data;
      let money = 0;
      this.orderLines.forEach(function (item) {
        money += item.price * item.number;
      });
      this.total = money;
      // console.log(res.data.orderLines);
    },
    toOrder() {
      this.$router.push("/order");
    },
  },
  created() {
    this.findByIdOrderData();
  },
  mounted() {},
};
</script>
<style scoped>
.body {
  width: 100%;
  height: 617px;
  overflow: scroll;
}
.head {
  height: 50px;
  background-color: #6699ff;
  text-align: center;
  position: relative;
}
.head > span {
  color: rgb(230, 240, 236);
  font-size: 17px;
  line-height: 50px;
}
.head > .icon {
  height: 20px;
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  margin: auto 0;
  cursor: pointer;
}
.content {
  padding: 10px;
}
.cards {
  margin-bottom: 20px;
}
.money {
  margin-top: 30px;
  height: 20px;
}
.money > div {
  float: right;
}
.money > div {
  font-size: 14px;
  color: red;
}
.money .title {
  color: black;
  font-size: 12px;
}
.info {
  color: #999;
  font-size: 13px;
  padding: 10px;
  border-radius: 3px;
  margin-top: 50px;
  background-color: rgba(177, 180, 179, 0.1);
  height: 120px;
}
.info > div {
  margin-top: 5px;
}
.info_status {
  float: right;
  margin-right: 10px;
}
</style>